import { useState } from "react";
import styles from "../happle/PosterSection.module.css";

// 导入图片
import img1 from "../happle/images/app1.jpg";
import img2 from "../happle/images/app2.jpg";
import img3 from "../happle/images/app3.jpg";
import img4 from "../happle/images/app4.jpg";
import img5 from "../happle/images/app5.jpg";
import img6 from "../happle/images/app6.jpg";
import img7 from "../happle/images/app7.jpg";
import img8 from "../happle/images/app8.jpg";

// 数据类型定义
interface Festival {
  id: string;
  name: string;
  isHot: boolean;
  templates: Template[];
}

interface Template {
  type: string;
  count: number;
  imageUrl: string;
}

// 模拟数据
const festivals: Festival[] = [
  {
    id: "dragon",
    name: "精选推荐",
    isHot: true,
    templates: [
      {
        type: "旅游综合展板",
        count: 237,
        imageUrl: img1,
      },
      {
        type: "夏日海报",
        count: 391,
        imageUrl: img2,
      },
      {
        type: "旅游出行H5长图",
        count: 130,
        imageUrl: img3,
      },
      {
        type: "小红书配图",
        count: 277,
        imageUrl: img4,
      },
      {
        type: "广告套图海报",
        count: 564,
        imageUrl: img5,
      },
      {
        type: "广告全套视觉",
        count: 228,
        imageUrl: img6,
      },
      {
        type: "旅游综合海报",
        count: 782,
        imageUrl: img7,
      },
      {
        type: "夏日H5",
        count: 330,
        imageUrl: img8,
      },
    ],
  },
  {
    id: "children",
    name: "618营销",
    isHot: true,
    templates: [
      {
        type: "营销展板KV",
        count: 109,
        imageUrl: img3,
      },
      {
        type: "销售战报海报",
        count: 69,
        imageUrl: img4,
      },
      {
        type: "营销类H5长图",
        count: 253,
        imageUrl: img5,
      },
      {
        type: "618H5",
        count: 332,
        imageUrl: img6,
      },
      {
        type: "直播人物海报",
        count: 301,
        imageUrl: img1,
      },
      {
        type: "618海报",
        count: 569,
        imageUrl: img7,
      },
      {
        type: "营销促销海报",
        count: 668,
        imageUrl: img2,
      },
      {
        type: "营销活动H5",
        count: 411,
        imageUrl: img8,
      },
    ],
  },
  {
    id: "summer",
    name: "教务培训",
    isHot: false,
    templates: [
      {
        type: "喜报海报",
        count: 104,
        imageUrl: img2,
      },
      {
        type: "毕业季海报",
        count: 145,
        imageUrl: img3,
      },
      {
        type: "高考H5",
        count: 265,
        imageUrl: img4,
      },
      {
        type: "教育类H5长图",
        count: 215,
        imageUrl: img5,
      },
      {
        type: "志愿海报",
        count: 78,
        imageUrl: img7,
      },
      {
        type: "高考海报",
        count: 515,
        imageUrl: img8,
      },
      {
        type: "教育综合海报",
        count: 413,
        imageUrl: img6,
      },
      {
        type: "教育培训H5",
        count: 323,
        imageUrl: img1,
      },
    ],
  },
  {
    id: "grain",
    name: "金融科技",
    isHot: false,
    templates: [
      {
        type: "科技综合展板",
        count: 634,
        imageUrl: img1,
      },
      {
        type: "科技展板主KV",
        count: 239,
        imageUrl: img2,
      },
      {
        type: "科技类banner",
        count: 253,
        imageUrl: img3,
      },
      {
        type: "UI可视化数据大屏",
        count: 287,
        imageUrl: img6,
      },
      {
        type: "金融海报",
        count: 190,
        imageUrl: img7,
      },
      {
        type: "邀请函海报",
        count: 306,
        imageUrl: img8,
      },
      {
        type: "科技综合海报",
        count: 677,
        imageUrl: img4,
      },
      {
        type: "AI人工智能H5",
        count: 185,
        imageUrl: img5,
      },
    ],
  },
  {
    id: "eye",
    name: "休闲娱乐",
    isHot: false,
    templates: [
      {
        type: "宠物海报",
        count: 145,
        imageUrl: img3,
      },
      {
        type: "自媒体海报",
        count: 92,
        imageUrl: img1,
      },
      {
        type: "娱乐类公众号首图",
        count: 151,
        imageUrl: img2,
      },
      {
        type: "娱乐类H5",
        count: 185,
        imageUrl: img5,
      },
      {
        type: "运动娱乐海报",
        count: 358,
        imageUrl: img6,
      },
      {
        type: "应援海报",
        count: 78,
        imageUrl: img7,
      },
      {
        type: "二次元海报",
        count: 66,
        imageUrl: img4,
      },
      {
        type: "直播类H5海报",
        count: 433,
        imageUrl: img8,
      },
    ],
  },
  {
    id: "gaokao",
    name: "餐饮美食",
    isHot: true,
    templates: [
      {
        type: "春茶海报",
        count: 134,
        imageUrl: img2,
      },
      {
        type: "美食展板",
        count: 269,
        imageUrl: img3,
      },
      {
        type: "美食类新媒体配图",
        count: 260,
        imageUrl: img1,
      },
      {
        type: "奶茶饮品H5",
        count: 227,
        imageUrl: img6,
      },
      {
        type: "水果海报",
        count: 115,
        imageUrl: img7,
      },
      {
        type: "奶茶饮品冷饮海报",
        count: 168,
        imageUrl: img8,
      },
      {
        type: "美食海报",
        count: 215,
        imageUrl: img4,
      },
      {
        type: "餐饮美食H5",
        count: 364,
        imageUrl: img5,
      },
    ],
  },
  {
    id: "yiliao",
    name: "医疗健康",
    isHot: true,
    templates: [
      {
        type: "银发经济养老海报",
        count: 27,
        imageUrl: img6,
      },
      {
        type: "口腔医疗海报",
        count: 118,
        imageUrl: img7,
      },
      {
        type: "牙齿口腔医疗H5",
        count: 93,
        imageUrl: img8,
      },
      {
        type: "医美H5",
        count: 213,
        imageUrl: img1,
      },
      {
        type: "中医海报",
        count: 72,
        imageUrl: img4,
      },
      {
        type: "美容护肤海报",
        count: 241,
        imageUrl: img2,
      },
      {
        type: "医疗海报",
        count: 335,
        imageUrl: img3,
      },
      {
        type: "医疗类H5",
        count: 250,
        imageUrl: img5,
      },
    ],
  },
  {
    id: "qiuzhi",
    name: "招聘求职",
    isHot: true,
    templates: [
      {
        type: "招聘展板",
        count: 140,
        imageUrl: img7,
      },
      {
        type: "企业简介海报易拉宝",
        count: 147,
        imageUrl: img8,
      },
      {
        type: "招聘类新媒体配图",
        count: 170,
        imageUrl: img1,
      },
      {
        type: "招聘类banner",
        count: 82,
        imageUrl: img6,
      },
      {
        type: "职业规划海报",
        count: 30,
        imageUrl: img5,
      },
      {
        type: "招聘海报",
        count: 620,
        imageUrl: img2,
      },
      {
        type: "招聘类H5",
        count: 400,
        imageUrl: img3,
      },
      {
        type: "招聘类H5长图",
        count: 161,
        imageUrl: img4,
      },
    ],
  },
];

export default function MarketingCalendar() {
  const [selectedFestival, setSelectedFestival] = useState<Festival>(
    festivals[0]
  );
  const [lockSelection, setLockSelection] = useState(false);

  const handleHover = (festival: Festival) => {
    if (!lockSelection) {
      setSelectedFestival(festival);
    }
  };

  const handleClick = (festival: Festival) => {
    setSelectedFestival(festival);
    setLockSelection(true);
  };

  return (
    <div className={styles.container}>
      <div className={styles.headerRow}>
        <h2 className={styles.sectionTitle}>行业趋势-海报篇</h2>
        <p className={styles.sectionDesc}>精选热点专题实时更新,热门素材轻松get~</p>
        <div className={styles.festivalList}>
          {festivals.map((festival) => (
            <div
              key={festival.id}
              className={`${styles.festivalItem} ${selectedFestival.id === festival.id ? styles.active : ""
                }`}
              onMouseEnter={() => handleHover(festival)}
              onMouseLeave={() => setLockSelection(false)}
              onClick={() => handleClick(festival)}
            >
              <div className={styles.festivalLeft}>
                <span className={styles.festivalName}>{festival.name}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className={styles.templateGallery}>
        {selectedFestival.templates.map((template) => (
          <div key={template.type} className={styles.templateCard}>
            <div className={styles.templateContent}>
              <div className={styles.templateImageContainer}>
                <img
                  src={template.imageUrl}
                  alt={template.type}
                  className={styles.templateImage}
                />
              </div>
              
              <div className={styles.templateInfo}>
                <h4>{template.type}</h4>
                <span>共{template.count}个作品</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}